import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {
    const [message] = useState([
        { id: '01', title: '消息1', content: '吃' },
        { id: '02', title: '消息2', content: '喝' },
        { id: '03', title: '消息3', content: '嫖' },
        { id: '04', title: '消息4', content: '赌' }
    ])

    const a = useNavigate()
    function showDetail(m) {
        // a('/about')
        a('/home/message/details',{  // 配置项暂时只支持下面两个
            replace:false,
            state:{
                id:m.id,
                title:m.title
            }
        })
    }
    return (
        <div>
            <ul>
                {
                    message.map((m) => {
                        return (
                            <li key={m.id}>
                                {/* state参数 */}
                                <Link to={`details`} state={{
                                    id: m.id,
                                    title: m.title
                                }}>{m.title}</Link>&nbsp;&nbsp;
                                <button onClick={()=>showDetail(m)}>查看详情</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            <Outlet></Outlet>
        </div>
    )
}
